<template>
  <div class="app-container simple-app-container">
    <div v-loading="loading" v-permission="['base-data:product:info:modify']">
      <a-form-model ref="form" :label-col="{span: 6}" :wrapper-col="{span: 14}" :model="formData" :rules="rules">
        <a-row>
          <a-col :md="8" :sm="24">
            <a-form-model-item label="商品名称" prop="name">
              <a-input v-model="formData.name" allow-clear />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-model-item label="商品编号" prop="code">
              <a-input v-model="formData.code" allow-clear />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-model-item label="商品简称" prop="shortName">
              <a-input v-model="formData.shortName" allow-clear />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-model-item label="商品类目" prop="categoryId">
              <product-category-selector v-model="formData.categoryId" :only-final="false" @input="selectCategory" />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-model-item label="商品品牌" prop="brandId">
              <product-brand-selector v-model="formData.brandId" :request-params="{ available: true }" />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-model-item label="规格" prop="spec">
              <a-input v-model="formData.spec" allow-clear />
            </a-form-model-item>
          </a-col>
          <a-col v-if="$enums.PRODUCT_TYPE.NORMAL.equalsCode(productType)" :md="8" :sm="24">
            <a-form-model-item label="重量（kg）" prop="weight">
              <a-input v-model="formData.weight" allow-clear />
            </a-form-model-item>
          </a-col>
          <a-col v-if="$enums.PRODUCT_TYPE.NORMAL.equalsCode(productType)" :md="8" :sm="24">
            <a-form-model-item label="体积（cm³）" prop="volume">
              <a-input v-model="formData.volume" allow-clear />
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-model-item label="状态" prop="available">
              <a-select v-model="formData.available" allow-clear @select="availableHandleSelcet">
                <a-select-option v-for="item in $enums.AVAILABLE.values()" :key="item.code" :value="item.code">{{ item.desc }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!--        <a-row>-->
        <!--          <a-col v-for="modelor in modelorList" :key="modelor.id" :md="8" :sm="24">-->
        <!--            <a-form-model-item :label="modelor.name" :required="modelor.isRequired">-->
        <!--              <a-select v-if="$enums.COLUMN_TYPE.MULTIPLE.equalsCode(modelor.columnType)" v-model="modelor.text" mode="multiple" placeholder="请选择">-->
        <!--                <a-select-option-->
        <!--                  v-for="item in modelor.items"-->
        <!--                  :key="item.id"-->
        <!--                  :value="item.id"-->
        <!--                >{{ item.name }}</a-select-option>-->
        <!--              </a-select>-->
        <!--              <a-select v-if="$enums.COLUMN_TYPE.SINGLE.equalsCode(modelor.columnType)" v-model="modelor.text" placeholder="请选择">-->
        <!--                <a-select-option-->
        <!--                  v-for="item in modelor.items"-->
        <!--                  :key="item.id"-->
        <!--                  :value="item.id"-->
        <!--                >{{ item.name }}</a-select-option>-->
        <!--              </a-select>-->
        <!--              <div v-else-if="$enums.COLUMN_TYPE.CUSTOM.equalsCode(modelor.columnType)">-->
        <!--                <a-input-number v-if="$enums.COLUMN_DATA_TYPE.INT.equalsCode(modelor.columnDataType)" v-model="modelor.text" class="number-input" />-->
        <!--                <a-input-number v-else-if="$enums.COLUMN_DATA_TYPE.FLOAT.equalsCode(modelor.columnDataType)" v-model="modelor.text" :precision="2" class="number-input" />-->
        <!--                <a-input v-else-if="$enums.COLUMN_DATA_TYPE.STRING.equalsCode(modelor.columnDataType)" v-model="modelor.text" />-->
        <!--                <a-date-picker v-else-if="$enums.COLUMN_DATA_TYPE.DATE.equalsCode(modelor.columnDataType)" v-model="modelor.text" placeholder="" value-format="YYYY-MM-DD" />-->
        <!--                <a-time-picker-->
        <!--                  v-else-if="$enums.COLUMN_DATA_TYPE.TIME.equalsCode(modelor.columnDataType)"-->
        <!--                  v-model="modelor.text"-->
        <!--                  placeholder=""-->
        <!--                  value-format="HH:mm:ss"-->
        <!--                />-->
        <!--                <a-date-picker v-else-if="$enums.COLUMN_DATA_TYPE.DATE_TIME.equalsCode(modelor.columnDataType)" v-model="modelor.text" placeholder="" show-time value-format="YYYY-MM-DD HH:mm:ss" />-->
        <!--              </div>-->
        <!--            </a-form-model-item>-->
        <!--          </a-col>-->
        <!--        </a-row>-->
        <a-row>
          <a-col :span="24">
            <vxe-grid
              ref="grid"
              resizable
              show-overflow
              highlight-hover-row
              keep-source
              row-id="id"
              height="360"
              :data="productSkus"
              :columns="[
                { type: 'checkbox', width: 40 },
                { field: 'id', title: '商品SKUID', width: 200, align: 'center', visible : false},
                { field: 'skuCode', title: 'SKU编号', width: 120, align: 'center', slots: { default: 'product_sku_skuCode_default' ,header: 'product_sku_skuCode_header'}},
                { field: 'externalCode', title: '外部编号', width: 120, align: 'center', slots: { default: 'product_sku_externalCode_default' }},
                { field: 'skuPropertys', title: '多属性ID值', width: 200, align: 'center', slots: { default: 'product_sku_propertys_default' }, visible : false},
                { field: 'skuPropertysStr', title: '多属性', width: 200, align: 'center', slots: { default: 'product_sku_propertys_str_default',header: 'product_sku_propertys_header' }},
                { field: 'unit', title: '单位', width: 80, align: 'center', slots: { default: 'product_sku_unit_default' }},
                { field: 'purchasePrice', title: '采购价', width: 100, align: 'center', slots: { default: 'product_sku_purchasePrice_default', header: 'product_sku_purchasePrice_header' }},
                { field: 'salePrice', title: '销售价', width: 100, align: 'center', slots: { default: 'product_sku_salePrice_default' ,header: 'product_sku_salePrice_header'}},
                { field: 'retailPrice', title: '零售价', width: 100, align: 'center', slots: { default: 'product_sku_retailPrice_default' ,header: 'product_sku_retailPrice_header'}},
                { field: 'taxRate', title: '进项税率%', width: 120, align: 'center', slots: { default: 'product_sku_taxRate_default' }},
                { field: 'saleTaxRate', title: '销项税率%', width: 120, align: 'center', slots: { default: 'product_sku_saleTaxRate_default' }},
                { field: 'available', title: '状态', width: 100, align: 'center', slots: { default: 'product_sku_available_default' }}
              ]"
              :toolbar-config="{
                // 缩放
                zoom: false,
                // 自定义表头
                custom: false,
                // 右侧是否显示刷新按钮
                refresh: false,
                // 自定义左侧工具栏
                slots: {
                  buttons: 'sku_toolbar_buttons'
                }
              }"
            >
              <!-- 工具栏 -->
              <template v-slot:sku_toolbar_buttons>
                <a-space>
                  <a-button @click="batchInputUnit">单位-批量</a-button>
                  <a-button @click="batchInputPurchasePrice">采购价-批量</a-button>
                  <a-button @click="batchInputSalePrice">销售价-批量</a-button>
                  <a-button @click="batchInputRetailPrice">零售价-批量</a-button>
                  <a-button @click="batchInputTaxRate">进项税率-批量</a-button>
                  <a-button @click="batchInputSaleTaxRate">销项税率-批量</a-button>
                </a-space>
              </template>

              <!-- SKU编号 列自定义表头 -->
              <template v-slot:product_sku_skuCode_header>
                <a-space>
                  <span>SKU编号<span style="color: red;padding: 2px 0px 0px 2px;">*</span></span>
                </a-space>
              </template>

              <!-- SKU编号 列自定义内容 -->
              <template v-slot:product_sku_skuCode_default="{ row }">
                <a-input v-model="row.skuCode" />
              </template>

              <!-- SKU外部编号 列自定义内容 -->
              <template v-slot:product_sku_externalCode_default="{ row }">
                <a-input v-model="row.externalCode" />
              </template>

              <!-- SKU属性 列自定义表头 -->
              <template v-slot:product_sku_propertys_header>
                <a-space>
                  <span>多属性<span style="color: red;padding: 2px 0px 0px 2px;">*</span></span>
                </a-space>
              </template>

              <!-- 多属性ID值 列自定义内容 -->
              <template v-slot:product_sku_propertys_default="{ row }">
                <a-input v-model="row.skuPropertys" read-only="readOnly" />
              </template>

              <!-- 多属性 列自定义内容 -->
              <template v-slot:product_sku_propertys_str_default="{ row }">
                <a-input v-model="row.skuPropertysStr" read-only="readOnly" placeholder="请选择上方商品属性" />
              </template>

              <!-- SKU单位 列自定义内容 -->
              <template v-slot:product_sku_unit_default="{ row }">
                <a-input v-model="row.unit" />
              </template>

              <!-- SKU采购价 列自定义表头 -->
              <template v-slot:product_sku_purchasePrice_header>
                <a-space>
                  <span>采购价<span style="color: red;padding: 2px 0px 0px 2px;">*</span></span>
                </a-space>
              </template>

              <!-- SKU采购价 列自定义内容 -->
              <template v-slot:product_sku_purchasePrice_default="{ row }">
                <a-input v-model="row.purchasePrice" class="number-input" />
              </template>

              <!-- 进项税率% 列自定义内容 -->
              <template v-slot:product_sku_taxRate_default="{ row }">
                <a-input v-model="row.taxRate" class="number-input" />
              </template>

              <!-- SKU销售价 列自定义表头 -->
              <template v-slot:product_sku_salePrice_header>
                <a-space>
                  <span>销售价<span style="color: red;padding: 2px 0px 0px 2px;">*</span></span>
                </a-space>
              </template>

              <!-- SKU销售价 列自定义内容 -->
              <template v-slot:product_sku_salePrice_default="{ row }">
                <a-input v-model="row.salePrice" class="number-input" />
              </template>

              <!-- 销项税率% 列自定义内容 -->
              <template v-slot:product_sku_saleTaxRate_default="{ row }">
                <a-input v-model="row.saleTaxRate" class="number-input" />
              </template>

              <!-- SKU零售价 列自定义表头 -->
              <template v-slot:product_sku_retailPrice_header>
                <a-space>
                  <span>零售价<span style="color: red;padding: 2px 0px 0px 2px;">*</span></span>
                </a-space>
              </template>

              <!-- SKU零售价 列自定义内容 -->
              <template v-slot:product_sku_retailPrice_default="{ row }">
                <a-input v-model="row.retailPrice" class="number-input" />
              </template>

              <!-- SKU状态 列自定义内容 -->
              <template v-slot:product_sku_available_default="{ row }">
                <a-select v-model="row.available">
                  <a-select-option v-for="item in $enums.AVAILABLE.values()" :key="item.code" :value="item.code">{{ item.desc }}</a-select-option>
                </a-select>
              </template>
            </vxe-grid>
          </a-col>
        </a-row>
      </a-form-model>
      <div class="form-modal-footer">
        <a-space>
          <a-button type="primary" @click="submit">保存</a-button>
          <a-button @click="closeDialog">关闭</a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>
<script>
import { validCode } from '@/utils/validate'
import ProductBrandSelector from '@/components/Selector/ProductBrandSelector'
import ProductCategorySelector from '@/components/Selector/ProductCategorySelector'

export default {
  // 使用组件
  components: {
    ProductBrandSelector, ProductCategorySelector
  },

  props: {
  },
  data() {
    return {
      id: this.$route.params.id,
      // 是否显示加载框
      loading: false,
      // 表单数据
      formData: {},
      productType: undefined,
      productBundles: [],
      modelorList: [],
      // 商品SKU集合
      productSkus: [],
      // 表单校验规则
      rules: {
        code: [
          { required: true, message: '请输入商品编号' },
          { validator: validCode, message: '编号必须由字母、数字、“-_.”组成，长度不能超过20位' }
        ],
        name: [
          { required: true, message: '请输入商品名称' }
        ],
        categoryId: [
          { required: true, message: '请选择类目' }
        ],
        brandId: [
          { required: true, message: '请选择品牌' }
        ],
        weight: [
          {
            validator: (rule, value, callback) => {
              if (!this.$utils.isEmpty(value)) {
                if (!this.$utils.isFloat(value)) {
                  return callback(new Error('重量（kg）必须为数字'))
                }
                if (!this.$utils.isFloatGeZero(value)) {
                  return callback(new Error('重量（kg）不允许小于0'))
                }
                if (!this.$utils.isNumberPrecision(value, 2)) {
                  return callback(new Error('重量（kg）最多允许2位小数'))
                }
              }

              callback()
            }
          }
        ],
        volume: [
          {
            validator: (rule, value, callback) => {
              if (!this.$utils.isEmpty(value)) {
                if (!this.$utils.isFloat(value)) {
                  return callback(new Error('体积（cm³）必须为数字'))
                }
                if (!this.$utils.isFloatGeZero(value)) {
                  return callback(new Error('体积（cm³）不允许小于0'))
                }
                if (!this.$utils.isNumberPrecision(value, 2)) {
                  return callback(new Error('体积（cm³）最多允许2位小数'))
                }
              }

              callback()
            }
          }
        ],
        available: [
          { required: true, message: '请选择状态' }
        ]
      }
    }
  },
  created() {
    // 初始化数据
    this.initFormData()
    // 查询数据
    this.loadFormData()
  },
  methods: {
    // 关闭对话框
    closeDialog() {
      this.$utils.closeCurrentPage(this.$parent)
    },
    // 初始化表单数据
    initFormData() {
      this.formData = {}
    },
    // 提交表单事件
    async submit() {
      let valid = true

      await this.$refs.form.validate((res) => {
        valid = res
      })

      if (!valid) {
        return
      }

      // 校验SKU数据
      if (!this.validSkuData()) {
        return
      }

      // eslint-disable-next-line no-unused-vars
      const params = Object.assign({}, this.formData, {
        skuItems: this.productSkus
      })
      this.loading = true
      this.$api.baseData.product.spu.modify(params).then(() => {
        this.$msg.success('修改成功！')
        // this.closeDialog()
        // this.$router.push('/xingyun/product/spu')
        // window.location.reload()
      }).finally(() => {
        this.loading = false
      })
    },
    // 查询数据
    loadFormData() {
      this.loading = true
      this.selectSkus()
      this.$api.baseData.product.spu.get(this.id).then(data => {
        this.formData = Object.assign({}, data)
        // this.selectCategory(this.formData.categoryId, this.formData)
        this.productType = this.formData.productType
      }).finally(() => {
        this.loading = false
      })
    },
    selectCategory(val, formData) {
      this.modelorList = []
      if (!this.$utils.isEmpty(val)) {
        this.$api.baseData.product.property.getModelorByCategory(val).then(res => {
          // const modelorList = res
          // if (formData) {
          //   const properties = formData.properties || []
          //   modelorList.forEach(item => {
          //     item.text = (properties.filter(p => p.id === item.id)[0] || {}).text
          //     if (this.$enums.COLUMN_TYPE.MULTIPLE.equalsCode(item.columnType)) {
          //       item.text = this.$utils.isEmpty(item.text) ? [] : item.text.split(',')
          //     }
          //   })
          // }
          //
          // modelorList.filter(item => this.$utils.isEmpty(item.text)).forEach(item => {
          //   if (this.$enums.COLUMN_TYPE.MULTIPLE.equalsCode(item.columnType)) {
          //     item.text = []
          //   } else {
          //     item.text = ''
          //   }
          // })
          //
          // this.modelorList = modelorList
        })
      }
    },
    // 查询商品SKU数据
    selectSkus() {
      const params = {
        spuId: this.id
      }
      this.$api.baseData.product.info.queryList(params).then(res => {
        this.productSkus = res
      })
    },
    // 校验SKU数据
    validSkuData() {
      for (let i = 0; i < this.productSkus.length; i++) {
        const product = this.productSkus[i]

        if (this.$utils.isEmpty(product.skuCode)) {
          this.$msg.error('第' + (i + 1) + '行SKU编号不允许为空！')
          return false
        }

        if (this.$utils.isEmpty(product.purchasePrice)) {
          this.$msg.error('第' + (i + 1) + '行商品采购价不允许为空！')
          return false
        }
        if (!this.$utils.isFloat(product.purchasePrice)) {
          this.$msg.error('第' + (i + 1) + '行商品采购价必须为数字！')
          return false
        }
        if (!this.$utils.isFloatGeZero(product.purchasePrice)) {
          this.$msg.error('第' + (i + 1) + '行商品采购价不允许小于0！')
          return false
        }
        if (!this.$utils.isNumberPrecision(product.purchasePrice, 2)) {
          this.$msg.error('第' + (i + 1) + '行商品采购价最多允许2位小数')
          return false
        }

        if (this.$utils.isEmpty(product.salePrice)) {
          this.$msg.error('第' + (i + 1) + '行商品销售价不允许为空！')
          return false
        }
        if (!this.$utils.isFloat(product.salePrice)) {
          this.$msg.error('第' + (i + 1) + '行商品销售价必须为数字！')
          return false
        }
        if (!this.$utils.isFloatGeZero(product.salePrice)) {
          this.$msg.error('第' + (i + 1) + '行商品销售价不允许小于0！')
          return false
        }
        if (!this.$utils.isNumberPrecision(product.salePrice, 2)) {
          this.$msg.error('第' + (i + 1) + '行商品销售价最多允许2位小数')
          return false
        }

        if (this.$utils.isEmpty(product.retailPrice)) {
          this.$msg.error('第' + (i + 1) + '行商品零售价不允许为空！')
          return false
        }
        if (!this.$utils.isFloat(product.retailPrice)) {
          this.$msg.error('第' + (i + 1) + '行商品零售价必须为数字！')
          return false
        }
        if (!this.$utils.isFloatGeZero(product.retailPrice)) {
          this.$msg.error('第' + (i + 1) + '行商品零售价不允许小于0！')
          return false
        }
        if (!this.$utils.isNumberPrecision(product.retailPrice, 2)) {
          this.$msg.error('第' + (i + 1) + '行商品零售价最多允许2位小数')
          return false
        }

        // 进项税率不为空时验证格式
        if (!this.$utils.isEmpty(product.taxRate)) {
          if (!this.$utils.isInteger(product.taxRate)) {
            this.$msg.error('第' + (i + 1) + '行销项税率%必须为整数')
            return false
          }
          if (!this.$utils.isIntegerGeZero(product.taxRate)) {
            this.$msg.error('第' + (i + 1) + '行销项税率%不允许小于0')
            return false
          }
        }

        // 销售税率不为空时验证格式
        if (!this.$utils.isEmpty(product.saleTaxRate)) {
          if (!this.$utils.isInteger(product.saleTaxRate)) {
            this.$msg.error('第' + (i + 1) + '行销售税率%必须为整数')
            return false
          }
          if (!this.$utils.isIntegerGeZero(product.saleTaxRate)) {
            this.$msg.error('第' + (i + 1) + '行销售税率%不允许小于0')
            return false
          }
        }

        return true
      }
    },
    // 批量录入单位
    batchInputUnit() {
      const records = this.$refs.grid.getCheckboxRecords()
      if (this.$utils.isEmpty(records)) {
        this.$msg.error('请选择商品数据！')
        return
      }

      this.$msg.prompt('请输入单位', {
        inputValue: '个',
        title: '批量调整商品单位'
      }).then(({ value }) => {
        records.forEach(t => {
          t.unit = value
        })
      })
    },
    // 批量录入采购价
    batchInputPurchasePrice() {
      const records = this.$refs.grid.getCheckboxRecords()
      if (this.$utils.isEmpty(records)) {
        this.$msg.error('请选择商品数据！')
        return
      }

      this.$msg.prompt('请输入采购价（元）', {
        inputPattern: this.$utils.PATTERN_IS_PRICE,
        inputErrorMessage: '采购价（元）必须为数字并且不小于0',
        inputValue: '0.00',
        title: '批量调整采购价'
      }).then(({ value }) => {
        records.forEach(t => {
          t.purchasePrice = value
        })
      })
    },
    // 批量录入销售价
    batchInputSalePrice() {
      const records = this.$refs.grid.getCheckboxRecords()
      if (this.$utils.isEmpty(records)) {
        this.$msg.error('请选择商品数据！')
        return
      }

      this.$msg.prompt('请输入销售价（元）', {
        inputPattern: this.$utils.PATTERN_IS_PRICE,
        inputErrorMessage: '销售价（元）必须为数字并且不小于0',
        inputValue: '0.00',
        title: '批量调整销售价'
      }).then(({ value }) => {
        records.forEach(t => {
          t.salePrice = value
        })
      })
    },
    // 批量录入零售价
    batchInputRetailPrice() {
      const records = this.$refs.grid.getCheckboxRecords()
      if (this.$utils.isEmpty(records)) {
        this.$msg.error('请选择商品数据！')
        return
      }

      this.$msg.prompt('请输入零售价（元）', {
        inputPattern: this.$utils.PATTERN_IS_PRICE,
        inputErrorMessage: '零售价（元）必须为数字并且不小于0',
        inputValue: '0.00',
        title: '批量调整零售价'
      }).then(({ value }) => {
        records.forEach(t => {
          t.retailPrice = value
        })
      })
    },
    // 批量录入进项税率
    batchInputTaxRate() {
      const records = this.$refs.grid.getCheckboxRecords()
      if (this.$utils.isEmpty(records)) {
        this.$msg.error('请选择商品数据！')
        return
      }

      this.$msg.prompt('请输入进项税率', {
        inputPattern: this.$utils.PATTERN_IS_PRICE,
        inputErrorMessage: '进项税率必须为数字并且不小于0',
        inputValue: '0.00',
        title: '批量调整进项税率'
      }).then(({ value }) => {
        records.forEach(t => {
          t.taxRate = value
        })
      })
    },
    // 批量录入销项税率
    batchInputSaleTaxRate() {
      const records = this.$refs.grid.getCheckboxRecords()
      if (this.$utils.isEmpty(records)) {
        this.$msg.error('请选择商品数据！')
        return
      }

      this.$msg.prompt('请输入销项税率', {
        inputPattern: this.$utils.PATTERN_IS_PRICE,
        inputErrorMessage: '销项税率必须为数字并且不小于0',
        inputValue: '0.00',
        title: '批量调整销项税率'
      }).then(({ value }) => {
        records.forEach(t => {
          t.saleTaxRate = value
        })
      })
    },
    // 商品状态值修改时触发事件
    availableHandleSelcet(value, option) {
      if (!value) {
        this.$msg.confirm('停用商品后其下所有SKU也将停用,确认停用？').then(() => {
          this.productSkus.forEach(t => {
            t.available = value
          })
        })
      }
    }
  }
}
</script>
